/* 矩阵变换组件样式 */

.container {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  color: #333;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 300px;
  grid-template-rows: auto auto;
  gap: 20px;
  grid-template-areas:
    "canvas controls"
    "matrix history";
}

.canvasSection {
  grid-area: canvas;
}

.controlSection {
  grid-area: controls;
}

.matrixSection {
  grid-area: matrix;
}

.historySection {
  grid-area: history;
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
    grid-template-areas:
      "canvas"
      "controls"
      "matrix"
      "history";
  }
}